<template>
    <div id="home">
        <!--外部容器-->
        <el-container>
            <!--侧边栏-->
            <el-aside width="auto">
                <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">导航一</span>
                        </template>
                        <el-menu-item-group>
                            <span slot="title">分组一</span>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <span slot="title">选项4</span>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>

                    <!--切换按钮-->
                    <div @click="toggleCollapse">
                        <span class="arrowDiv" id="arrowDiv" v-show="showArrowDiv">
                            <i :class="{'el-icon-arrow-right right' : isActive, 'el-icon-arrow-left left': !isActive}"></i>
                            <i :class="{'el-icon-arrow-right right' : isActive, 'el-icon-arrow-left left': !isActive}"></i>

                        </span>
                    </div>

                </el-menu>
            </el-aside>

            <!--右侧容器-->
            <el-container>
                <!--导航栏-->
                <el-header>
<!--                    <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="1">处理中心</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">我的工作台</template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                            <el-menu-item index="2-3">选项3</el-menu-item>
                            <el-submenu index="2-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="2-4-1">选项1</el-menu-item>
                                <el-menu-item index="2-4-2">选项2</el-menu-item>
                                <el-menu-item index="2-4-3">选项3</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="3" disabled>消息中心</el-menu-item>
                        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>

                        <a href="/aa/vuel1">页面一</a>
                        <a href="/aa/vuel2">页面二</a>

                    </el-menu>-->

                    <my-nav v-bind:="$attrs"></my-nav>

                </el-header>

                <!--主要内容-->
                <el-main>
                    <!--插槽-->
                    <slot name="main"></slot>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    module.exports = {
        //props : ['info'],
        data() {
            return {
                showArrowDiv: true,//是否显示箭头
                isCollapse: true,
                isActive: true,//控制箭头样式
            };
        },
        components: {
            'arrow': httpVueLoader('arrow.vue'),
            'my-nav': httpVueLoader('/static/vue/nav.vue'),
        },
        methods: {
            handleOpen (key, keyPath) {
                console.log(key, keyPath)
            },
            handleClose (key, keyPath) {
                console.log(key, keyPath)
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            toggleCollapse () {
                this.isCollapse = !this.isCollapse
                this.isActive = !this.isActive
            },
        }
    }
</script>
<style  scoped>
    .el-header{
        padding: 0;
    }
    #home {
        width: 100%;
        height: 100%;

    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .el-menu-admin:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .el-container {
        height: 100%;
    }
    .el-container {
        height: 100%;
    }
    .el-aside {
        width: auto;
        overflow: revert;
        background-color: #545c64;
        position: relative;
    }
    .el-menu-vertical-demo{
        height: 100vh;
    }
    .el-header {
        height: 67px;
/*
        background-color: #fe4;
*/
    }
    .el-main {
        background-color: powderblue;
    }
    .toggle {
        font-size: 36px;
        color: #989898;
        cursor: pointer;
        line-height: 30px;
    }

    /*箭头特效*/
    #arrowDiv{
        cursor: pointer;
        width: 35px;
        height: 50px;
        position: absolute;
        top: 40%;
        right: 0;
        text-align: center;
        line-height: 50px;
    }
    #arrowDiv i{
        color: dodgerblue;
        margin: -8px;
        display:inline-block;
        position: relative;
    }
    #arrowDiv .right{
        animation: arrowDiv 2s linear;
        animation-iteration-count: infinite
    }
    #arrowDiv .left{
        animation: arrowLeft 2s linear;
        animation-iteration-count: infinite
    }
    #arrowDiv i:nth-child(1){
        opacity: .3;
    }
    #arrowDiv i:nth-child(2){
        opacity: .7;
    }
    @keyframes arrowDiv {
        0%{left: -0.5em}
        100%{left: 0.5em}
    }
    @keyframes arrowLeft {
        0%{left: 0.5em}
        100%{left: -0.5em}
    }
    @keyframes arrowDiv2 {
        0%{opacity: .1}
        100%{opacity: .6}
    }
</style>